import {designPage, reactive} from 'plain-design-composition'
import React from 'react'
// @ts-ignore
import content from './test.md'
import {MonacaEditor} from "@/components/monaco/MonacoEditor";
import {$$dialog, PlButton} from "plain-design";

export default designPage(() => {

    const state = reactive({
        text: content,
    })

    return () => <>
        <div style={{backgroundColor: 'white', padding: '20px'}}>
            <PlButton label="打印绑定值" style={{marginBottom: '20px'}} onClick={() => $$dialog({
                editType: 'textarea',
                editValue: state.text,
                editReadonly: true,
            })}/>
            <div style={{height: '500px'}}>
                <MonacaEditor v-model={state.text} language="markdown"/>
            </div>
        </div>
    </>
})
